<template>
  <div>
    <order-header title="订单列表" v-if="showHeader">
      <span slot="desc">温馨提示： 请认真核对您的订单信息及收货地址哦</span>
    </order-header>
    <div class="container">
      <loading v-if="isShowLoading"></loading>
      <ul class="order-list">
        <li class="list-item" v-for="(item, i) in list" :key="i">
          <div class="item-header">
            <div class="header-info">
              <span class="time">{{ item[0].createTime | timeFilter }}</span>
              <span>{{ item[0].receiverName }}</span>
              <span>订单号：{{ item[0].orderSerialNumber }}</span>
            </div>
            <el-button type="danger" @click="deleteOrder(item[0].orderSerialNumber)">删除订单</el-button>
          </div>
          <!-- 订单明细 -->
          <div class="item-content" v-for="item1 in item" :key="item1.id">
            <div class="product-detail" @click="detailClick(item1.goods.id)">
              <el-image
               style="width: 100px"
                :src="item1.goods.coverImg"></el-image>
                <h2 style="text-align:center;">{{item1.goods.goodsName}}</h2>
            </div>
            <div class="item-detail">
              <span class="item-desc">货物数量：{{ item1.amount }}</span>
              <div class="item-desc">送货地址：{{ item1.consigneeAddress }}</div>
              <div class="item-desc">收货人姓名：{{ item1.consigneeName }}</div>
              <div class="item-desc">收货人手机号：{{ item1.consigneePhone }}</div>
            </div>
            <div class="control-detail" v-if="item[0].status">
              <!-- <el-button class="header-price1" v-if="curTmp===" type="warning" @click="sureGet(item1)">确认收货</el-button>
              <el-button class="header-price1"
              v-else type="warning" @click="sureComment(item1)">评价</el-button> -->
            </div>
          </div>
          <!-- 订单支付状态 -->
          <div class="header-price">
            应付金额：<span class="large">{{ item.reduce((total, cur) => total += cur.totalMoney, 0) }}</span
            >元
          </div>
          <el-button type="warning" class="header-price1" @click="toDetail(item[0].orderSerialNumber)">查看订单详情</el-button>
          <div class="item-state"  @click="goPayClick(item[0])">
            <span :style="{color: item[0].status ? '#4fc08d' : '#ff6600'}">{{
              item[0].status ? '已支付' : '未支付'
            }}</span>
            <span v-if="!item[0].status" class="icon-arrow"></span>
          </div>
        </li>
      </ul>
      <show-no-data v-if="list.length == 0 && !isShowLoading"></show-no-data>
    </div>
  </div>
</template>

<script>
import OrderHeader from "components/orderheader/OrderHeader";
import Loading from "components/loading/Loading";
import ShowNoData from "components/nodata/ShowNoData";
import { mapState } from 'vuex'
export default {
  name: "orderList",
  components: {
    OrderHeader,
    Loading,
    ShowNoData,
  },
  data() {
    return {
      list: [], //订单列表
      isShowLoading: true, //页面在初始渲染时是否显示正在加载动画
      isLoading: false, //点击加载更多时是否显示loading动画
      busy: false, //控制是否禁用滚动加载事件触发 默认为不禁用
    };
  },
  filters: {
    timeFilter (val) {
      return val.match(/.+(?=\.)/g)[0].replace('T', ' ')
    }
  },
  computed: {
    ...mapState(['user']),
    showHeader () {
      return this.$route.path !== '/user'
    }
  },
  mounted() {
    this.getOrderList()
  },
  methods: {
    /**
     * 删除订单
     */
    deleteOrder (id) {
      let params = {
        orderSerialNumber: id
      }
      this.$api.cart.deleteOrder(params).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功~'
          })
          this.getOrderList()
        }
      })
    },
    /**
     * 到商品详情页
     */
    detailClick(id) {
      this.$router.push("/detail/" + id)
    },
    // 获取订单列表 保存订单信息
    getOrderList() {
      this.busy = true;
      let query = {
        userId: this.user.id
      }
      this.$api.cart.orderByUser(query).then(res => {
        if (res.code === 200) {
          this.list = res.data
          this.isShowLoading = false;
          this.busy = false;
        }
      }).catch(err => {
        this.isShowLoading = false;
        this.busy = false;
      })
    },
    /**
     * 去订单详情
     */
    toDetail (id) {
      this.$router.push({
        path: '/order/detail',
        query: {
          orderId: id
        }
      })
    },
    // 未支付订单点击去支付按钮 路由跳转
    goPayClick(item) {
      if (item.status) {
        return
      } else {
        this.$router.push({
          path: "/order/pay",
          query: {
            orderId: item.orderSerialNumber,
          },
        });
      }
    },
    /**
     * 确认收货
     */
    sureGet () {

    },
    /**
     * 确认评价
     */
    sureComment () {
      // this.$router.push({
      //     path: `/detail/${}`
      //   });
    }
  },
};
</script>
<style scoped>
/* 版心区域 */
.container {
  padding: 32px 0;
  height: 600px;
  max-width: 100%;
  overflow: auto;
}
.order-list{
  height: 100%;
  overflow: auto;
}
.order-list::-webkit-scrollbar {
width:8px;
height:8px;
}
/*滚动条里面小方块样式*/
.order-list::-webkit-scrollbar-thumb {
border-radius:100px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:gray;
}
/*滚动条里面轨道样式*/
.order-list::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
/* 订单列表子项 */
.list-item {
  border: 2px solid #e5e5e5;
  box-sizing: border-box;
  margin-bottom: 20px;
  position: relative;
}
/* 订单头部 */
.item-header {
  height: 74px;
  background-color: #fffaf7;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  color: #666;
  font-size: 16px;
}
/* 订单头部信息 */
.header-info span {
  padding: 0 8px;
  position: relative;
}
.header-info span:first-child {
  padding-left: 0;
}
.header-info span::before {
  content: "";
  width: 1px;
  height: 13px;
  background-color: #e5e5e5;
  position: absolute;
  top: 2px;
  left: 0;
}
.header-info span:first-child::before {
  display: none;
}
/* 订单头部价格 */
.header-price {
  padding: 0 0 20px 43px;
  color: #ff6600;
  font-size: 22px;
}
.header-price1{
  margin: 0 0 20px 40px;
}
/* 订单详情 */
.item-content {
  height: 145px;
  background-color: #fff;
  padding: 0 43px;
  display: flex;
  align-items: center;
}
.item-image {
  width: 112px;
  height: 89px;
  background-color: seagreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-image img {
  width: 100%;
}
.item-detail {
  max-width: 50%;
  padding-left: 30px;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}
.control-detail{
  width: 50%;
  padding-left: 30px;
}
.item-state {
  position: absolute;
  bottom: 45px;
  right: 43px;
  font-size: 16px;
  color: #ff6600;
  font-weight: 600;
}
.icon-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: 2px solid #ff6600;
  border-right: 2px solid #ff6600;
  top: 6px;
  transform: rotate(45deg);
}

/* 分页器样式 */
.pagination {
  text-align: center;
}
/* 加载更多按钮样式 */
.loading-more {
  text-align: center;
}
/* 滚动加载更多动画样式 */
.scroll-loading {
  text-align: center;
}
</style>
